<template>
	<div>
		<div class="header">
			<img src="../assets/jtz.png" alt="" class="jtz">
			<span class="title_text">搜索</span>
		</div>
		<form action="" class="search_form">
			<input type="search" placeholder="请输入小区/写字楼/学校等" v-model="keyword">
			<button @click="ss">搜索</button>
		</form>
		<ul v-show="!xs" class="address_list">
			<router-link :to="{name:'tjdz',params:{name:items.name,address:items.address,geohash:items.geohash}}" v-for="(items,index) in item" :key="index"
			 tag="li">
				<h4>{{items.name}}</h4>
				<p>{{items.address}}</p>
			</router-link>
		</ul>
		<div class="empty_tips" v-show="xs">
			<p>找不到地址？</p>
			<p>尝试输入小区、写字楼或学校名</p>
			<p>详细地址（如门牌号等）可稍后输入哦</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "scdz",
		data() {
			return {
				keyword: "",
				item: [],
				xs:true
			}
		},
		created() {

		},
		methods: {
			ss() {
				let obj = this;
				obj.xs =false;
				this.$axios({
					url: 'https://elm.cangdu.org/v1/pois?type=nearby' + '&keyword=' + "'" + this.keyword + "'",
					method: "get",
					data: {
						keyword: this.keyword,
					}
				}).then(function(res) {
					for (let i = 0; i < res.data.length; i++) {
						obj.item.push(res.data[i])
					}
					window.console.log(obj.item)
				})
			}
		}
	}
</script>

<style scoped>
	.jtz {
		width: 70px;
		height: 70px;
		position: absolute;
		top: 12px;
	}

	.header {
		width: 100%;
		height: 90px;
		background-color: #3190e8;
		position: relative;
	}

	.title_text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		text-align: center;
		font-size: 38px;
		font-weight: 700;
	}

	.search_form {
		display: flex;
		padding: 33px;
	}

	.search_form input {
		font-size: 30px;
		color: #999;
		flex: 4;
		background-color: #f1f1f1;
		margin-right: 28px;
		height: 70px;
		border-radius: 7px;
		padding: 18px;
		border: none;
		outline: none;
	}

	.search_form button {
		flex: 1;
		font-size: 30px;
		color: #fff;
		background-color: #3190e8;
		border-radius: 7px;
		border: none;
		outline: none;
	}

	.empty_tips {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

	.empty_tips p {
		font-size: 24px;
		color: #aaa;
		line-height: 33px;
		text-align: center;
	}

	.address_list {
		padding: 0 33px;
		background-color: white;
	}

	.address_list li {
		padding: 33px 0;
		border-bottom: 1px solid #f5f5f5;
		line-height: 47px;
		list-style: none;
	}

	.address_list li h4 {
		font-size: 35px;
		color: #555;
	}

	.address_list li p {
		font-size: 30px;
		color: #999;
	}
</style>
